<!--
 * @Author: early-autumn
 * @Date: 2020-05-21 09:19:51
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-06-17 15:37:30
-->
<template>
  <el-dialog
    title="选择患者"
    width="680px"
    append-to-body
    :visible="value"
    @close="handleClose"
  >
    <el-table
      v-loading="loading"
      border
      :data="personList"
      stripe
      @row-click="handleChange"
    >
      <el-table-column
        label="姓名"
        align="center"
        prop="name"
        min-width="100"
      ></el-table-column>
      <el-table-column
        label="手机号"
        align="center"
        min-width="180"
        prop="phoneNumber"
      ></el-table-column>
      <el-table-column label="性别" align="center" prop="sex">
        <template slot-scope="scope">
          {{ sexEnum[scope.row.sex] }}
        </template>
      </el-table-column>
      <el-table-column label="年龄" align="center" prop="age"></el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    ></pagination>
  </el-dialog>
</template>

<script>
import { listPerson } from '@/api/services/person'
import { listReservation } from '@/api/erp/reservation'
import { sexEnum } from '@/utils/enums'

const QUERY_PARAMS = {
  pageNum: 1,
  pageSize: 10,
}

export default {
  name: 'SearchPatient',
  model: {
    prop: 'value',
    event: 'close',
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    keyword: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // 加载中
      loading: false,
      // 总数
      total: 0,
      // 查询参数
      queryParams: {},
      // 患者列表
      personList: [],
    }
  },
  computed: {
    sexEnum() {
      return sexEnum
    },
  },
  watch: {
    value(newVal) {
      if (newVal) {
        this.queryParams = { ...QUERY_PARAMS, keyword: this.keyword }
        this.getList()
      }
    },
  },
  methods: {
    /**
     * 关闭
     */
    handleClose() {
      this.$emit('close', false)
    },
    /** 查询到店患者信息列表 */
    async getList() {
      try {
        this.loading = true
        this.currentPatient = undefined
        const { rows, total } = await listReservation(this.queryParams)
        this.personList = rows
        this.total = total
      } finally {
        this.loading = false
      }
    },
    /**
     * 选择当前患者
     */
    handleChange(e) {
      this.handleClose()
      this.$emit('ok', e)
    },
  },
}
</script>

<style></style>
